import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks'
import Accordion from '../../ch/components/Accordion.vue'
import AccordionItem from '../../ch/components/AccordionItem.vue'

<Meta
  title="Components/Accordion"
  component={Accordion}
/>

export const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { Accordion, AccordionItem },
  template:
    `
    <Accordion id="1">
      <AccordionItem
        id="10"
        title="Accordion item one"
      >
        <h4 class="h5">The title of the accordion item is a h3, therefore, as a subtitle, I am a h4 with a .h5 css class</h4>
        <p>Description here</p>
      </AccordionItem>
      <AccordionItem
        id="11"
        title="Accordion item two"
      >
        AccordionItem Content here
      </AccordionItem>
    </Accordion>
    `
})


# Accordion

<Canvas>
  <Story
    name="Example"
    args={{}}
  >
    {Template.bind({})}
  </Story>
</Canvas>

# Interactions and accessibility

Each accordion item regroup a button `.accordion__button`  and a related `.accordion__drawer`. Each button have an `aria-controls` attribute pointing the id of the drawer:

```html
<ul class="accordion">
  <li class="accordion__item">
    <button
      class="accordion__button"
      aria-expanded="false"
      :aria-controls="content-id"
    >
      <h3 class="accordion__title">
        <!--Title here-->
      </h3>
      <svg class="accordion__arrow">...</svg>
    </button>
    <div
      class="accordion__drawer"
      aria-hidden="true"
      :id="content-id"
    >
      <div class="accordion__content vertical-spacing">
        <!--Content here-->
      </div>
    </div>
  </li>
</ul>
```

During interactions, some ARIA attributes have to be modified for a correct behaviour on assitive technologies.

Below an example of a simple script resolving two accessibility topics:
1. Toggle `aria-expanded` and `aria-hidden` attributes on accordion button.
2. Hide the eventual focusable elements inside a closed accordion


```javascript
const Accordion = {
  init(target) {
    let buttons = document.querySelectorAll(target)
    buttons.forEach(button => {
      let content = button.nextElementSibling
      let focusableElements = getFocusableElements(content)
      // make focusable content unfocusable
      focusableElements.forEach(item => {
        item.tabIndex =  -1
      })

      button.addEventListener("click", (event) => {
        if (button.classList.contains("active")) {
          // close drawer
          button.classList.remove("active")
          button.setAttribute("aria-expanded", false)
          content.style.maxHeight = null
          content.setAttribute("aria-hidden", true)
          // make focusable content unfocusable
          focusableElements.forEach(item => {
            item.tabIndex =  -1
          })
        }
        else {
          // open drawer
          button.classList.add("active")
          content.style.maxHeight = content.scrollHeight + "px";
          content.setAttribute("aria-hidden", false)
          button.setAttribute("aria-expanded", true)
          // make focusable content focusable again
          focusableElements.forEach(item => {
            item.tabIndex = undefined
          })
        }
      })
    })
  },
}
export default Accordion
```

# Headings and accessibility


## Accordion title
Most of the time, the label of an accordion can be considered as a heading and should be marked with a `h2`, `h3` or a `h4`.

The heading level depends on the parent heading level and should respect the heading chain. For example, a `h4` heading shouldn't follow a `h2` title (use a `h3` instead). This rule applies on accordions titles too.

More informations about [why heading levels should only increase by one](https://dequeuniversity.com/rules/axe/4.4/heading-order?application=axeAPI).

## Titles inside an accordion
Following the same logic, the titles inside an accordion content should be considered as subtitles of the accordion title. For example, if the accordion title is a `h3`, the following titles inside the accordion should start with a `h4`

## Styles for titles inside an accordion
The recommended style for any heading inside an accordion is the `.h5` CSS class. For example, a fourth level heading will adopt the `<h4 class="h5">` markup.

## Rules of thumb

1. __Accordion heading level = Parent title level + 1__
2. __Heading level inside an accordion content = Accordion heading level + 1__

If these rules can't be applied technically, for example in a complex migration process, the best option is to __remove the headings inside the accordions__. With this approach, the semantic of the titles is lost, but the content doesn't bring confusion for people using assistive technologies.

